import React, {useState} from "react";
import {Button, Center, Image, SearchIcon, Text, View} from "native-base";
import {Platform, TouchableOpacity} from "react-native";
import error from '../../assets/error.webp';

export const BeerPreviewCard = ({laiyuan,niandai,photo1,photo2,name,navigation}) => {
    const [show, setShow] = useState(false);
    return <Center>
            <TouchableOpacity
                onPress={() => {
                    setShow(!show)
                }}
                onLongPress={()=>{
                    setShow(true)
                }}
            >
                <Image
                    source={{
                        uri:
                            Platform.OS === 'android' ||
                            (Platform.Os === 'iOS' && Platform.Version > 14)
                                ? !show
                                ? `${photo1}?imageView2/0/format/webp/interlace/1/q/1`
                                : `${photo2}?imageView2/0/format/webp/interlace/1/q/1`
                                : !show
                                ? `${photo1}`
                                : `${photo2}`,
                    }}
                    fallbackSource={require('../../assets/error.webp')}
                    alt="123"
                    size="2xl"
                    resizeMethod="resize"
                />
            </TouchableOpacity>
        <Button
            style={{
                marginBottom: 20,
                color: '#565656',
                backgroundColor: '#fff',
            }}
            onPress={() =>{
                navigation.navigate('ImgShow', {
                    img1: photo1,
                    img2: photo2,
                })
            }}
            >
            <SearchIcon size="4" />
        </Button>
        <Center _text={{ fontSize: 16 }}>{name}</Center>
        <Center _text={{ color: '#c9c9c9', fontSize: 12 }}>
            {laiyuan + ' ' + niandai}
        </Center>
    </Center>
}